import React, { useEffect, useState } from 'react';
import { Col, Row, notification, Button } from 'tdesign-react';
import { UsergroupIcon, FileIcon } from 'tdesign-icons-react';
import Board, { ETrend } from 'components/Board';
import Style from './TopPanel.module.less';
import { getReservationStatisticsAPI } from '@/api/reservation.api';
import PubSub from 'pubsub-js';
import { useNavigate } from 'react-router-dom';

interface StatisticsData {
  totalCount: number;
  approvedCount: number;
  rejectedCount: number;
  pendingCount: number;
}

const TopPanel = () => {
  const [statistics, setStatistics] = useState<StatisticsData>({
    totalCount: 0,
    approvedCount: 0,
    rejectedCount: 0,
    pendingCount: 0,
  });

  const navigate = useNavigate();

  useEffect(() => {
    // 初始加载统计数据
    getReservationStatisticsAPI().then((res) => {
      if (res.status === 200) {
        setStatistics(res.data);
      }
    });

    // 订阅预约消息
    const reservationToken = PubSub.subscribe('reservationMessage', (_, data) => {
      // 更新统计数据
      getReservationStatisticsAPI().then((res) => {
        if (res.status === 200) {
          setStatistics(res.data);
        }
      });
    });

    // 订阅审批消息
    const approvalToken = PubSub.subscribe('approvalMessage', (_, data) => {
      if (data.type === 'approval') {
        // 更新统计数据
        getReservationStatisticsAPI().then((res) => {
          if (res.status === 200) {
            setStatistics(res.data);
          }
        });
      }
    });

    return () => {
      PubSub.unsubscribe(reservationToken);
      PubSub.unsubscribe(approvalToken);
    };
  }, [navigate]);

  const PANE_LIST = [
    {
      title: '总预约数',
      count: statistics.totalCount.toString(),
      trend: ETrend.up,
      trendNum: '--',
      dark: true,
    },
    {
      title: '审批通过',
      count: statistics.approvedCount.toString(),
      trend: ETrend.up,
      trendNum: `${((statistics.approvedCount / statistics.totalCount) * 100).toFixed(1)}%`,
    },
    {
      title: '拒绝审批',
      count: statistics.rejectedCount.toString(),
      trend: ETrend.down,
      trendNum: `${((statistics.rejectedCount / statistics.totalCount) * 100).toFixed(1)}%`,
      Icon: (
        <div className={Style.iconWrap}>
          <FileIcon className={Style.svgIcon} />
        </div>
      ),
    },
    {
      title: '待审批',
      count: statistics.pendingCount.toString(),
      trend: ETrend.down,
      trendNum: `${((statistics.pendingCount / statistics.totalCount) * 100).toFixed(1)}%`,
      Icon: (
        <div className={Style.iconWrap}>
          <UsergroupIcon className={Style.svgIcon} />
        </div>
      ),
    },
  ];

  return (
    <Row gutter={[16, 16]}>
      {PANE_LIST.map((item) => (
        <Col key={item.title} xs={6} xl={3}>
          <Board
            title={item.title}
            trend={item.trend}
            trendNum={item.trendNum}
            count={item.count}
            desc={'占比'}
            Icon={item.Icon}
            dark={item.dark}
          />
        </Col>
      ))}
    </Row>
  );
};

export default React.memo(TopPanel);
